//跟组件
//app==>index.js=>public/index.html(root)
import React from "react";
import { SayHello } from "./Class";
function getName() {
  return "zhangsan";
}
const islogin = true;
const list = [
  {
    id: 2002,
    namekey: "daw",
  },
  { id: 2003, namekey: "daw2" },
  { id: 2004, namekey: "daw2" },
];
const dv = () => {
  return <div style={{ color: "red", backgroundColor: "pink" }}>daw</div>;
};
const cate = [
  {
    id: 1,
    name: "a",
  },
  {
    id: 2,
    name: "b",
  },
  {
    id: 3,
    name: "c",
  },
];
const Buton = () => {
  return <button>按钮</button>;
};
// 函数组件
class Hello extends React.Component {
  render() {
    return <div>hello</div>;
  }
}
const count = 100;
const loadData = () => {
  return islogin && <div>loading...</div>;
};

console.log(loadData());
//函数组件
// 函数组件必须以大写字母开头，区分html结构
// 函数组件必须有返回值，表示改组件的ui结构，如果不需要套返回null
function App() {
  console.log(loadData());
  const handleClick = (name, e) => {
    console.log("click", name, e);
  };

  return (
    <div className="App">
      {/* 函数调用 */}
      {getName()}
      {/* 方法调用 */}
      {new Date().getDate()}
      {/* 识别变量 */}
      {count}
      {/* 使用js对象 */}
      <div style={{ color: "red" }}>this is app</div>
      {/* 控制某个元素的显示隐藏 */}
      {islogin && (
        <ul>
          {list.map((item, index) => {
            return (
              <li key={item.id}>
                {index === 0 && (
                  <img
                    width={100}
                    height={100}
                    src="https://lmg.jj20.com/up/allimg/4k/s/02/2109251P5514946-0-lp.jpg"
                    alt="推荐"
                  />
                )}
                {item.namekey}
              </li>
            );
          })}
        </ul>
      )}
      {dv()}
      <ul>
        <Buton></Buton>
        {cate.map((item, index) => {
          return <li key={index}>{item.name}</li>;
        })}
      </ul>
      <ul
        style={{
          listStyle: "none",
          color: "skyblue",
          padding: "0",
          margin: "0",
        }}
      >
        {list.map((item) => {
          return <li key={item.id}>{item.namekey + "222"}</li>;
        })}
      </ul>
      {/* 三元运算 */}
      {islogin ? <div>登录成功</div> : <div>请先登录</div>}
      {/* 事件绑定 */}
      <button onClick={(e) => handleClick("jack", e)}>click</button>
      {/* 逻辑与 */}
      {/* 行内样式*/}
      {loadData()}
      {/* 类组件 */}
      <Hello></Hello>
      <SayHello />
    </div>
  );
}

export default App;
